<template>
  <div class="reoreder">
    <u-head :title="tit"></u-head>
    <div class="retop">
      <div class="fixed">
        <div class="address" v-if="list.length<1">
          <span @click="addAddress">+点击完善收货地址</span>
        </div>
        <div @click="addAddress" v-if='list.length>0' class="address1">
          <p>姓名：{{ list[0].username }}</p>
          <p>手机号：{{ list[0].userphone }}</p>
          <p>收货地址：{{ list[0].location+list[0].useraddress }}</p>
          <div>J</div>
        </div>
      </div>
    </div>
    <div class="mains">
      <div class="tit">
        <p>
          <img src="" alt="" />
          <span>品牌精选</span>
        </p>
        <p><span>以免运费&nbsp;|</span><span>领券</span></p>
      </div>

      <div class="details" v-for="item in shopList" :key="item.id">
        <div class="img">
          <img :src="$pregImg + item.img" />
        </div>
        <div class="jies">
          <p>{{ item.goodsname }}</p>
          <p>&yen;{{ item.price }}</p>
          <p>七天无理由退货</p>
        </div>
        <div class="shu">x&nbsp;{{ item.num }}</div>
      </div>

      <ul>
        <li>
          <span>发票类型</span>
          <span>不开发票 ></span>
        </li>
        <li>
          <span>售后免邮</span>
          <span>部分商家赠送</span>
        </li>
        <li>
          <span>卖家留言</span>
          <span>填写内容需要与商家协商并确认，45字以内</span>
        </li>
      </ul>
    </div>
    <div class="foot">
      <ul>
        <li><span>商品金额</span><span>&yen;10000</span></li>
        <li><span>优惠活动</span><span class="tes">-&yen;200</span></li>
        <li><span>优惠券</span><span class="tes2">更多优惠券></span></li>
      </ul>
    </div>
    <div class="tijiao">
      <div>
        <p>
          <span>合计</span><span>&yen;{{ totalPrice }}</span>
        </p>
        <p><span>已免运费</span><span>已优惠</span></p>
      </div>
      <div class="btn">
        <button @click="goPay">确认订单{{ totalNum }}件</button>
      </div>
    </div>
  </div>
</template>
<script>
import uHead from "../components/public/uHead.vue";
import { getAddressApi } from "@/api/orders/orders";
export default {
  components: {
    uHead,
  },
  data() {
    return {
      tit: "确认订单",
      list:[],
      shopList: [],
    };
  },
  mounted() {
    this.shopList = JSON.parse(this.$route.query.order);
    this.getList()
  },
  computed: {
    //获取商品总数量
    totalNum() {
      let a = 0;
      this.shopList.forEach((item) => {
        a += item.num;
      });
      return a;
    },
    //获取商品总价格
    totalPrice() {
      let a = 0;
      this.shopList.forEach((item) => {
        a += item.num * item.price;
      });
      return a;
    },
  },
  methods: {
    //点击确定订单去支付
    async goPay() {
      /* console.log(this.list);
      console.log(this.shopList); */
      let arr=[]
      let money=0
      this.shopList.forEach(item=>{
        arr.push(item)
        money+=item.price
      })
      arr.push(this.list[0])
      console.log(arr);
      this.$router.push({path:'/pay',query:{money}})
    },
    //点击增加地址
    addAddress(){
      this.$router.push('/address')
    },
    //获取收货的默认地址
    async getList(){
      let uid = JSON.parse(localStorage.getItem("user")).uid;
      let res=await getAddressApi({ uid })
      this.list.push(res.list[0])
      console.log(this.list);
    }
  },
};
</script>
<style lang="less" scoped>
.reoreder {
  .retop {
    position: relative;
    width: 100%;
    height: 1.2rem;
    background: linear-gradient(#ff6040, #fc8c7f);
    .fixed {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 0rem;
      width: 92%;
      height: 1.8rem;
      background-color: #fff;
      border-radius: 0.1rem;
      .address1 {
        position: relative;
        font-size: 14px;
        padding: 5px 5px;
        width: 90%;
        margin: 0 auto;
        text-align: left;
        background-color: #fef6eb;
        margin-top: 0.25rem;
        border: 1px solid #dfc498;
        border-radius: 0.14rem;

        div {
          position: absolute;
          width: 25px;
          height: 25px;
          background-color: red;
          top: 5px;
          right: 10px;
          text-align: center;
          line-height: 25px;
          border-radius: 50%;
        }
      }
      .address {
        margin: 0 auto;
        width: 3.4rem;
        height: 0.7rem;
        line-height: 0.6rem;
        margin-top: 0.5rem;
        background-color: #fef6eb;
        border: 1px solid #dfc498;
        text-align: center;
        color: #f4aa4e;
        font-weight: 900;

        border-radius: 0.14rem;
        span {
          font-size: 0.28rem;
        }
      }
    }
  }
  .mains {
    margin-top: 0.85rem;
    width: 100%;
    height: auto;
    padding-bottom: 0.2rem;
    background-color: #fff;
    .tit {
      display: flex;
      justify-content: space-between;
      padding: 0 0.3rem;
      font-size: 0.3rem;
      font-weight: 900;
      p:first-child {
        img {
          width: 0.4rem;
          height: 0.4rem;
        }
        span {
          margin-left: 0.08rem;
        }
      }
      p:last-child {
        margin-top: 0.08rem;
        span:first-child {
          font-weight: 400;
          font-size: 0.28rem;
        }
        span:last-child {
          font-weight: 400;
          color: #ff6040;
          margin-left: 0.1rem;
          font-size: 0.28rem;
        }
      }
    }
    .details {
      display: flex;
      border-bottom: 1px solid rgb(240, 234, 234);
      .img {
        width: 3rem;
        height: 2.5rem;
        text-align: center;
        img {
          width: 2.5rem;
          height: 2.5rem;
        }
      }
      .jies {
        margin-top: 0.34rem;
        font-size: 0.24rem;
        p:first-child {
          font-size: 0.28rem;
        }
        p:nth-child(2) {
          margin-top: 0.24rem;
          font-size: 0.3rem;
          color: #f45d3e;
        }
        p:last-child {
          width: 1.8rem;
          height: 0.4rem;
          color: #fff;
          text-align: center;
          border-radius: 0.1rem;
          background-color: #ff8064;
          margin-top: 0.4rem;
        }
      }
      .shu {
        font-size: 0.35rem;
        margin-top: 1.7rem;
        padding-left: 1rem;
      }
    }
    ul {
      margin-top: 0.12rem;
      li {
        font-size: 0.26rem;
        padding: 0.15rem 0.29rem;
        display: flex;
        justify-content: space-between;
        span:first-child {
          font-weight: 900;
        }
        span:last-child {
          color: #666;
        }
      }
    }
  }
  .foot {
    margin-top: 0.1rem;
    width: 100%;
    height: auto;
    padding-bottom: 0.2rem;
    background-color: #fff;
    ul {
      padding-top: 0.1rem;
      li {
        font-size: 0.26rem;
        font-weight: 900;
        display: flex;
        justify-content: space-between;
        padding: 0.15rem 0.29rem;
        span:last-child {
          font-weight: 400;
        }
        .tes {
          color: #ff603f;
        }
        .tes2 {
          color: #666;
        }
      }
    }
  }
  .tijiao {
    position: fixed;
    display: flex;
    align-items: center;
    bottom: 0;
    width: 90%;
    height: 1rem;
    padding-left: 0.31rem;
    justify-content: space-between;
    background-color: #fff;
    div:first-child {
      font-size: 0.26rem;
      p:first-child {
        span:first-child {
          font-size: 0.28rem;
        }
        span:last-child {
          margin-left: 1rem;
          display: inline-block;
          padding-top: 0.06rem;
          color: #ff603f;
        }
      }
      p:last-child {
        margin-top: 0.12rem;
        font-size: 0.24rem;
        color: #666;
        span:last-child {
          margin-left: 0.7rem;
        }
      }
    }
    div:last-child {
      font-size: 15px;
      color: #fff;
      width: 2rem;
      height: 100%;
      button {
        width: 100%;
        height: 100%;
        background-color: #ff603f;
      }
    }
  }
}
</style>
